<template>
  <div class="box">
    <!-- 忘记密码表单 -->
    <div class="regBox">
      <div class="reg-title">忘记密码</div>
      <el-form
        class="h799"
        :rules="regRules"
        :model="forgetForm"
        ref="forgetFormRef"
      >
        <el-form-item prop="email">
          <i class="iconfont icon-youxiang"></i>
          <el-input
            v-model="forgetForm.email"
            prefix-icon="none"
            placeholder=" 请输入邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item class="rlt" prop="code">
          <i class="iconfont icon-yanzhengma2"></i>
          <el-input
            v-model="forgetForm.code"
            prefix-icon="none"
            placeholder=" 请输入验证码"
            clearable
            ref="code"
          ></el-input>
          <span class="sendcode" v-show="show" @click="getCode"
            >获取验证码</span
          >
          <span class="sendcode" v-show="!show">{{ count }} s</span>
        </el-form-item>

        <el-form-item prop="password">
          <i class="iconfont icon-iconset0114"></i>
          <el-input
            v-model="forgetForm.password"
            prefix-icon="none"
            placeholder=" 请输入新密码"
            clearable
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <i class="iconfont icon-iconset0114"></i>
          <el-input
            v-model="forgetForm.repassword"
            prefix-icon="none"
            placeholder=" 请确认新密码"
            clearable
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item class="reg">
          <el-button type="danger" @click="postForm"> 提交</el-button>
        </el-form-item>
        <el-form-item>
          <p class="xieyi">点击注册代表您已同意《Easton用户协议》</p>
          <div class="havecount">
            已有账号!
            <router-link to="/toLogin">立即登录</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入封装的请求方法
import { post, sendPost } from "@/utils/http";
import api from "@/config/api";
import userUtil from "../../../utils/userUtil";

export default {
  data () {
    // 自定义邮箱校验规则
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.forgetForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      // 忘记密码表单对象
      forgetForm: {
        email: '',
        password: '',
        repassword: '',
        code: '',
      },
      // 忘记密码表单校验规则
      regRules: {
        email: [
          { required: true, message: '邮箱格式不正确', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码输入不合理', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePass2,message: '两次密码不一致', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 6, max: 6, message: '验证码不正确', trigger: 'blur' }
        ]
      },
      // 倒计时
      show: true,
      count: '',
      timer: null,
      options: [{
        value: '1',
        label: 'PTE'
      },
      {
        value: '2',
        label: '雅思'
      },
      {
        value: '3',
        label: 'CCL'
      },
      {
        value: '4',
        label: '签证知识'
      },
      {
        value: '5',
        label: '其他'
      }],
      // 学科列表
      xueKeList: [],
      value: ''
    }
  },
  methods: {
    // 发送验证码
    getCode () {
      const mailReg = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+(\.[a-zA-Z0-9_.-])+/
      const TIME_COUNT = 60
      var that=this
      // 邮箱校验通过的情况下允许发送验证码
      if (!this.timer && mailReg.test(this.forgetForm.email)) {
        // 获取验证码
        sendPost(api.sendPassWordMail, { email: this.forgetForm.email }).then(res => {
          if(res.success=='1'){
            that.$msg.error(res.msg);
          }else{
            that.$msg.success(res.msg);
            // 这里处理发送验证码
            that.count = TIME_COUNT
            that.show = false
            that.timer = setInterval(() => {
              if (that.count > 0 && that.count <= TIME_COUNT) {
                that.count--
              } else {
                that.show = true
                clearInterval(that)
                that.timer = null
              }
            }, 1000)
          }
        })
      }else{
        this.$msg.info('请检查邮箱格式!')
      }
    },
    // 注册
    postForm () {
      this.$refs.forgetFormRef.validate(valid => {
        if (!valid) {
          return
        }else{
          let that = this
          post(api.updatePassWord, {
            email: this.forgetForm.email,
            password: this.forgetForm.password,
            code: this.forgetForm.code
          }).then((res) => {

            if (res.data.success == '0') {
              that.$msg.success(res.data.msg)

              that.$router.push("toLogin")
            } else {
              that.$msg.error(res.data.msg);

            }
          })
        }
      })
      // eslint-disable-next-line no-undef


    }
  },
  created () {
  }
}

</script>

<style lang="less" scoped>
/deep/.el-input__inner:focus {
  border-color: #dcdfe6;
}
.regBox {
  position: absolute;
  left: 50%;
  margin-top: 6.25rem;
  transform: translateX(-50%);
  width: 34.5rem;
  height: 42.9375rem;
  background: #ffffff;
  box-shadow: 0px 0px 0.625rem 0px rgba(0, 0, 0, 0.5);
  border-radius: 0.3125rem;
  padding: 0 5.9375rem;
  box-sizing: border-box;

  /deep/ .el-input__inner {
    height: 3.325rem !important;
    line-height: 3.325rem;
    color: #999 !important;
  }

  .el-button {
    width: 22.625rem;
    height: 3.125rem;
    font-size: 1.125rem;
  }

  .iconfont {
    position: absolute;
    left: 0.625rem;
    z-index: 1000;
    color: #cfcfcf;
    font-size: 0.95rem;
    height: 100%;
    line-height: 3.325rem;
  }

  .el-form-item {
    position: relative;
  }

  .reg-title {
    font-size: 2rem;
    color: #999999;
    text-align: center;
    height: 8.0625rem;
    line-height: 8.0625rem;
  }

  .sendcode {
    width: 6.625rem;
    height: 100%;
    line-height: 3.125rem;
    text-align: center;
    color: #999;
    background-color: #ebebeb;
    position: absolute;
    right: 0;
    cursor: pointer;
    border-radius: 0.1875rem;
    font-size: 1rem;
  }

  .xdy {
    font-size: 1.25rem;
    color: #999999;

    span {
      color: #ededed;
    }
  }

  .tal,
  .reg {
    color: #999;
  }

  .area {
    width: 14.25rem;
    margin-top: 1rem;
  }

  .course {
    width: 14.25rem;
  }

  .xieyi {
    font-size: 1rem;
    color: #999;
    text-align: center;
  }

  .havecount {
    font-size: 1rem;
    color: #999;
    text-align: center;

    a {
      color: #ff5e4e;
      text-decoration: underline;
    }
  }
}
</style>
